.ccan8 {
  margin: 0;
  height: 32px;
  position: relative;
  font-size: inherit;
  font-weight: 1000;
  font-family:"Mulish";
  display: inline-block;
  min-width: 95px;
  white-space: nowrap;
  color: #092c53;
}
a{
text-decoration: none;
color: #fff;
}
.logo-and-image-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs) 0 0;
}
.ccan-logo-02-02-28 {
  height: 34.8px;
  width: 64px;
  position: relative;
  object-fit: cover;
}
.logo-and-image-container-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
}
.home22 {
  position:relative;
  line-height: 20px;
  display: inline-block;
  min-width: 51px;
  color: #092c53;
}
.home21 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--spacing-2) var(--spacing-3);
}
.about-us14 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 78px;
  white-space: nowrap;
}
.component-17 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--spacing-2) var(--spacing-3);
}
.events10 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 57px;
}
.component-27 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--spacing-2) var(--spacing-3);
}
.digital-gallery15 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 121px;
  white-space: nowrap;
}
.component-322 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--spacing-2) var(--spacing-3);
}
.contact-us7 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 92px;
  white-space: nowrap;
}
.component-410,
.home-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.component-410 {
  padding: var(--spacing-2) var(--spacing-3);
}
.home-group {
  margin: 0;
  align-self: stretch;
  gap: 15px 15px;
  text-align: left;
  font-size: var(--regular-links-size);
  color: var(--primary);
  font-family: "Mulish";
}
.hero-container,
.hero-container-inner {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}
.hero-container-inner {
  margin: 0;
  width: 593px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-12xs);
}
.hero-container {
  align-self: stretch;
  box-shadow: var(--headers-blur);
  background-color: var(--white);

  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--padding-12xl) var(--padding-191xl) var(--padding-9xl)
    var(--padding-175xl-5);
  top: 0;
  z-index: 99;
  position: sticky;
  gap: var(--gap-xl);
  text-align: left;
  font-size: var(--card-text-size);
  color: var(--primary);
  font-family: var(--font-messenger);
  
}
.button-shape {
  position: absolute;
  top: 301px;
  left: 82px;
  filter: blur(200px);
  border-radius: 50%;
  background-color: var(--white);
  width: 585px;
  height: 585px;
}
.download-2-2,
.untitled-1-2-icon {
  position: absolute;
  top: 0;
  left: -29px;
  width: 512px;
  height: 797px;
  object-fit: contain;
  z-index: 1;
}
.download-2-2 {
  top: 77px;
  left: 176px;
  width: 720px;
  height: 720px;
  z-index: 2;
}
.download-button-container {
  width: 896px;
  height: 886px;
  position: absolute;
  margin: 0 !important;
  bottom: -89px;
  left: 0;
}
.corner,
.welcome-to-the,
.youth-children8 {
  margin: 0;
}
.ccan-asalatu-agbaye,
.welcome-to-the-container {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
}
.organization-name-container {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-2xl) 0 var(--padding-xl);
  font-size: var(--headline-3-size);
  color: var(--tertiary);
  font-family: var(--font-open-sans);
}
.welcome-to-the-youth-childre-parent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.hero-section,
.hero-section-inner {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}
.hero-section-inner {
  width: 744px;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-43xl);
}
.hero-section {
  align-self: stretch;
  background: linear-gradient(180deg, #7a807e 8%, #dddfdc 98.1%);
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 154px;
  position: relative;
  gap: 175px;
}
.card-columns-icon {
  height: 100%;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 10px;
  transform: scale(1.171);
}
.wrapper-card-columns {
  height: 450px;
  width: 409px;
  position: relative;
  border-radius: var(--br-5xs);
  flex-shrink: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blank-line5,
.ready-to-put,
.whether-youre-a {
  margin: 0;
}
.ready-to-put-container {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
}
.join-the-fun {
  position: relative;
  font-size: 30px;
  letter-spacing: 0.04em;
  line-height: 31px;
  font-family: var(--font-open-sans);
  color: var(--color-black);
  text-align: left;
  text-decoration: none;
  top: 10px;
}
.join-fun-container {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-5) var(--padding-xl);
  background-color: var(--secondary);
  width: 400px;
  border-radius: var(--spacing-7);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  max-width: 100%;
  height: 50px;
}
.component-3121:hover,
.component-3122:hover,
.join-fun-container:hover,
.read-article-container:hover,
.read-now-container:hover,
.read-now-wrapper:hover {
  background-color: var(--color-goldenrod);
}
.join-fun-button,
.ready-to-put-your-islamic-know-parent {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.join-fun-button {
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}
.ready-to-put-your-islamic-know-parent {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-7xl);
}
.card-rows,
.stories-card-content {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.stories-card-content {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 78px;
  min-width: 395px;
  min-height: 371px;
}
.card-rows {
  align-self: stretch;
  background-color: var(--white);
  overflow: hidden;
  flex-direction: row;
  align-items: flex-end;
  padding: var(--padding-21xl) var(--padding-91xl) var(--padding-21xl)
    var(--padding-117xl);
  gap: var(--gap-154xl);
}
.are-you-ready,
.get-ready-to {
  margin: 0;
}
.get-ready-to-container {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
}
.read-an-article {
  position: relative;
  font-size: var(--paragraph-size);
  letter-spacing: 0.04em;
  line-height: 31px;
  font-family: var(--font-open-sans);
  color: var(--color-black);
  text-align: left;
  top: 10px;
}
.read-article-button,
.read-article-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
}
.read-article-container {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-5) var(--padding-xl);
  background-color: var(--secondary);
  width: 400px;
  border-radius: var(--spacing-7);
  overflow: hidden;
  flex-shrink: 0;
  white-space: nowrap;
  height: 50px;
}
.read-article-button {
  align-self: stretch;
  padding: 0 var(--padding-xl);
}
.knowledge-card-content,
.knowledge-card-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.knowledge-card-content {
  align-self: stretch;
  gap: var(--gap-7xl);
}
.knowledge-card-content-wrapper {
  flex: 1;
  padding: 0 0 129px;
  box-sizing: border-box;
  min-width: 395px;
  min-height: 320px;
}
.wrapper-frame-387-child {
  height: 100%;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 10px;
  transform: scale(1.171);
}
.wrapper-frame-387 {
  height: 450px;
  width: 409px;
  position: relative;
  border-radius: var(--br-5xs);
  flex-shrink: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-rows1 {
  align-self: stretch;
  background-color: var(--yc-background);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--padding-21xl) var(--padding-91xl) var(--padding-21xl)
    var(--padding-117xl);
  box-sizing: border-box;
  gap: var(--gap-154xl);
  max-width: 100%;
}
.wrapper-frame-387-item {
  height: 100%;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 10px;
  transform: scale(1.171);
}
.wrapper-frame-3871 {
  height: 450px;
  width: 409px;
  position: relative;
  border-radius: var(--br-5xs);
  flex-shrink: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.discover-the-remarkable,
.embark-on-a {
  margin: 0;
}
.embark-on-a-container,
.read-now {
  position: relative;
  display: inline-block;
}
.embark-on-a-container {
  margin: 0;
  align-self: stretch;
  height: 238px;
  font-size: inherit;
  letter-spacing: -0.04px;
  font-weight: 400;
  font-family: inherit;
}
.read-now {
  font-size: var(--paragraph-size);
  letter-spacing: 0.04em;
  line-height: 31px;
  font-family: var(--font-open-sans);
  color: var(--color-black);
  text-align: left;
  min-width: 122px;
  top: 10px;
}
.read-now-wrapper {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-5) var(--padding-xl);
  background-color: var(--secondary);
  width: 400px;
  border-radius: var(--spacing-7);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  max-width: 100%;
  height: 50px;
  position: relative;
  top: 10px;
}
.embark-on-a-journey-through-ca-parent,
.frame-wrapper {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-wrapper {
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}
.embark-on-a-journey-through-ca-parent {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-7xl);
}
.card-rows-inner,
.card-rows2 {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.card-rows-inner {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 61px;
  min-width: 441px;
  min-height: 388px;
}
.card-rows2 {
  align-self: stretch;
  background-color: var(--white);
  overflow: hidden;
  flex-direction: row;
  align-items: flex-end;
  padding: var(--padding-21xl) var(--padding-21xl) var(--padding-21xl)
    var(--padding-117xl);
  gap: var(--gap-154xl);
}
.from-playful-reminders,
.join-us-on {
  margin: 0;
}
.join-us-on-container {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
}
.read-now1 {
  position: relative;
  font-size: var(--paragraph-size);
  letter-spacing: 0.04em;
  line-height: 31px;
  font-family: var(--special-links);
  color: var(--color-black);
  text-align: left;
  display: inline-block;
  min-width: 125px;
  top: 10px;
}
.frame-wrapper1,
.read-now-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
}
.read-now-container {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-5) var(--padding-xl);
  background-color: var(--secondary);
  width: 400px;
  border-radius: var(--spacing-7);
  overflow: hidden;
  flex-shrink: 0;
  white-space: nowrap;
  height: 50px;
}
.frame-wrapper1 {
  align-self: stretch;
  padding: 0 var(--padding-xl);
}
.card-rows-child,
.join-us-on-a-journey-filled-wi-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.join-us-on-a-journey-filled-wi-parent {
  align-self: stretch;
  gap: var(--gap-7xl);
}
.card-rows-child {
  flex: 1;
  padding: 0 0 116px;
  box-sizing: border-box;
  min-width: 395px;
  min-height: 333px;
}
.wrapper-frame-387-inner {
  height: 100%;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 10px;
  transform: scale(1.171);
}
.wrapper-frame-3872 {
  height: 450px;
  width: 409px;
  position: relative;
  border-radius: var(--br-5xs);
  flex-shrink: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-items,
.card-rows3,
.cards-container {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.card-rows3 {
  align-self: stretch;
  background-color: var(--yc-background);
  overflow: hidden;
  flex-direction: row;
  align-items: flex-end;
  padding: var(--padding-21xl) var(--padding-91xl) var(--padding-21xl)
    var(--padding-117xl);
  box-sizing: border-box;
  gap: var(--gap-154xl);
}
.card-items,
.cards-container {
  align-items: flex-start;
}
.card-items {
  flex: 1;
  flex-direction: column;
}
.cards-container {
  align-self: stretch;
  flex-direction: row;
  padding: 0 var(--padding-11xs);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--headline-4-size);
  color: var(--black);
  font-family: var(--font-open-sans);
}
.ccan-logo-02-02-18,
.location-new-18 {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.ccan-logo-02-02-18 {
  align-self: stretch;
  height: 114.5px;
  max-width: 100%;
  object-fit: cover;
}
.location-new-18 {
  height: 34.1px;
  width: 24px;
}
.nigeria8,
.ojo-street-idi-oro11 {
  margin: 0;
}
.ojo-street-idi-oro-container8 {
  flex: 1;
  position: relative;
  line-height: 24px;
}
.location-new-1-parent1 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-lg);
}
.free-phone-icon-14-thumb-18 {
  height: 24px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 24px;
}
.phone-number6 {
  position: relative;
  line-height: 24px;
  white-space: nowrap;
}
.free-phone-icon-14-thumb-1-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-lg);
}
.email-icon7 {
  height: 19.2px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.ccanasalatuagbayegmailcom8 {
  height: 48px;
  width: 202px;
  position: relative;
  line-height: 24px;
  display: inline-block;
  flex-shrink: 0;
  max-height: 48px;
  word-break: break-word;
}
.contact-info3,
.email-icon-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-lg);
}
.contact-info3 {
  align-self: stretch;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}
.ic4-1-icon8,
.social-media-links3,
.youtube-1-icon8 {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 32px;
}
.ic4-1-icon8,
.social-media-links3 {
  height: 32px;
  width: 32px;
}
.youtube-1-icon8 {
  align-self: stretch;
  width: 45.8px;
  max-height: 100%;
}
.social-media-icons4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xl);
}
.footer-content2 {
  width: 244px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-4);
}
.explore8 {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  min-width: 84px;
}
.component-357 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  font-size: var(--headline-4-size);
  font-family: var(--headline-4);
}
.articles10 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 63px;
  transition: 0.6s ease-in-out;
}


.articles10:hover{
 color: #5688c7;
}

.component-367 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
  
 transition: 0.6s ease-in-out;
  
}

.component-367:hover{

transform: scale(1.1); /*zooming*/



}
.dhkir-dua8 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 105px;
  transition: 0.6s ease-in-out;
}


.dhkir-dua8:hover{
 color: #5688c7;
}

.component-377 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-4xs);
  transition: 0.6s ease-in-out;
  
}

.component-377:hover{

transform: scale(1.1); /*zooming*/



}
.digital-gallery16 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 118px;
  transition: 0.6s ease-in-out;
}


.digital-gallery16:hover{
 color: #5688c7;
}
.component-387 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
  transition: 0.6s ease-in-out;
  
}

.component-387:hover{

transform: scale(1.1); /*zooming*/

}
.youth-children9 {
  position: relative;
  line-height: 24px;
  transition: 0.6s ease-in-out;
}


.youth-children9:hover{
 color: #5688c7;
}
.component-3421 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
  transition: 0.6s ease-in-out;
  
}

.component-3421:hover{

transform: scale(1.1); /*zooming*/

}
.archive8 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 63px;
  transition: 0.6s ease-in-out;
}


.archive8:hover{
 color: #5688c7;
}

.component-3422 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
  transition: 0.6s ease-in-out;
  
}

.component-3422:hover{

transform: scale(1.1); /*zooming*/

}
.community-directory7 {
  position: relative;
  line-height: 24px;
}
.component-3423,
.content-links {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
}
.content-links {
  flex-direction: column;
  padding: var(--padding-5xl) 0;
}
.our-service8 {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
}
.component-407 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: var(--headline-4-size);
  font-family: var(--headline-4);
}
.home23 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 50px;
  transition: 0.6s ease-in-out;
}


.home23:hover{
 color: #5688c7;
}

.component-417 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0;
  
 transition: 0.6s ease-in-out;
  
}

.component-417:hover{

transform: scale(1.1); /*zooming*/


}
.about-us15 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 76px;
  transition: 0.6s ease-in-out;
}


.about-us15:hover{
 color: #5688c7;
}
.component-427 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0;
  
 transition: 0.6s ease-in-out;
  
}

.component-427:hover{

transform: scale(1.1); /*zooming*/

}

.live-streaming7 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 124px;
  transition: 0.6s ease-in-out;
}


.live-streaming7:hover{
 color: #5688c7;
}

.component-437,
.right-navigation-column {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0;
  
 transition: 0.6s ease-in-out;
  
}

.component-437:hover{

transform: scale(1.1); /*zooming*/


}
.right-navigation-column {
  flex-direction: column;
  padding: var(--padding-5xl) 0;
}
.our-newsletter7,
.subscribe-to7 {
  margin: 0;
}
.subscribe-to-our-container7 {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
}
.email8 {
  position: relative;
  letter-spacing: 0.04em;
  line-height: 24px;
  font-weight: 300;
  display: inline-block;
  min-width: 38px;
}
.email-placeholder {
  align-self: stretch;
  border-radius: var(--br-5xs);
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-3xs);
}
.email-placeholder-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 148px;
}
.submit21 {
  position: relative;
  font-size: var(--font-size-xl);
  font-weight: 500;
  font-family: var(--font-roboto);
  color: var(--black);
  text-align: left;
  display: inline-block;
  min-width: 64px;
}
.component-3121,
.email-input2 {
  display: flex;
  flex-direction: row;
}
.component-3121 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-3xs) var(--padding-xl);
  background-color: var(--secondary);
  border-radius: var(--spacing-3);
  align-items: center;
  justify-content: center;
  
 transition: 0.6s ease-in-out;
  
}

.component-3121:hover{

transform: scale(1.1); /*zooming*/


}
.email-input2 {
  align-self: stretch;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
  font-size: var(--special-links-size);
  color: var(--inactive);
  font-family: var(--special-links);
}
.left-navigation-column,
.newsletter-subscription {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.newsletter-subscription {
  width: 344px;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-5xl) 0;
  box-sizing: border-box;
  gap: var(--spacing-4);
  font-size: var(--headline-4-size);
  font-family: var(--headline-4);
}
.left-navigation-column {
  align-self: stretch;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.submit22 {
  position: relative;
  font-size: var(--font-size-xl);
  font-weight: 500;
  font-family: var(--font-roboto);
  color: var(--black);
  text-align: left;
  display: inline-block;
  min-width: 64px;
}
.component-3122 {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-4) var(--padding-xl);
  background-color: var(--secondary);
  border-radius: var(--spacing-3);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
 transition: 0.6s ease-in-out;
  
}

.component-3122:hover{

transform: scale(1.1); /*zooming*/


}
.quote-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs) 0;
}
.lend-allah-a8,
.surely-your-reward8 {
  margin: 0;
}
.lend-allah-a-container8 {
  position: relative;
  font-weight: 500;
  display: inline-block;
  max-width: 100%;
}
.quote-container-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-base);
  max-width: 100%;
  font-size: var(--font-size-xl);
  font-family: var(--font-roboto);
}
.navigation-columns4,
.navigation-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.navigation-items {
  align-self: stretch;
}
.navigation-columns4 {
  flex: 1;
  padding: var(--padding-3xs-7) 0 0;
  box-sizing: border-box;
  min-width: 578px;
}
.footer-content-group,
.footer7 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}
.footer-content-group {
  width: 1165px;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--gap-13xl);
}
.footer7 {
  align-self: stretch;
  background-color: var(--primary);
  justify-content: center;
  padding: var(--padding-62xl) var(--padding-xl) var(--padding-61xl-5);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--regular-links-size);
  color: var(--white);
  font-family: var(--special-links);
}
.content-cards,
.youthchildren-articles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.content-cards {
  align-self: stretch;
  gap: var(--gap-6xs);
  max-width: 100%;
}
.youthchildren-articles {
  width: 100%;
  position: relative;
  background-color: var(--yc-background);
  overflow: hidden;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  font-size: 96px;
  color: var(--primary);
  font-family: var(--font-bubblegum-sans);
}



.dropdown{
  display: inline-block;
}

.dropdown button{
  background-color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;

}
.dropdown a{
  display: block;
  color: #092c53;
  text-decoration: none;
  padding: 1px 10px;
  
}

.dropdown .content {
  display: none;
  background-color: #e3e3e3;
  position: absolute;
  min-width: 300px;
  box-shadow: 2px 2px 5px #092c53;
 
}

.content a{
  padding: 10px 15px;
}

.dropdown:hover .content{
display: block;

}


.dropdown:hover button{
  background-color: #092c53;
  
    }


    .dropdown a:hover{
      background-color: #092c53;
        color: #fff;
          }

/*sidebar & menu button*/
          .menu-button{
            display: none;
          }
          
.sidebar{
  position: fixed;
  top: 0; 
  right: 0;
  height: 100vh;
  width: 500px;
  z-index: 999;
  background-color: #e3e3e3;
  backdrop-filter: blur(12px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

  .sidebar .home3{
    padding: 5% ;
    width: 100%;
  
  
  }
  .sidebar .home{
    padding: 1% ;
    width: 80%;
   

  }



  


input[type="email"]{ 
  display: flex;
  padding-block: 15px;
  padding: 15px;
  appearance: auto;
  text-rendering: auto;
  cursor: text;
  position: relative;
  
  
  border-radius: var(--br-5xs);
  align-items: center;
}

input{
  text-align: start;
  text-transform: none;
  text-shadow: none;
  font-style: inherit;
  font-size: 15px;
  font-weight: 200;
}


form {
  display: flex;
  width: fit-content;
  margin: 5px
  
}


i {
  position: relative;
  right: -25px;
  z-index: 2
}


span{
  color: #fff;
}

button[type]{
  border-radius: var(--spacing-3);
  background-color: var(--secondary);
  flex-direction: row;
  align-items: center;
  padding: var(--padding-3xs) var(--padding-xl);
  font-size: var(--font-size-xl);
  color: var(--black);
  font-family: var(--font-roboto);
  transition: 0.6s ease-in-out;
}

button:hover{

  transform: scale(1.1); /*zooming*/
  
  }


  @media screen and (max-width: 1000px) {
    .card-columns-icon {
      flex: 1;
    }
    .card-rows {
      flex-wrap: wrap;
    }
    .wrapper-frame-387-child {
      flex: 1;
    }
    .card-rows1 {
      flex-wrap: wrap;
    }
    .wrapper-frame-387-item {
      flex: 1;
    }
    .card-rows2 {
      flex-wrap: wrap;
    }
    .wrapper-frame-387-inner {
      flex: 1;
    }
    .card-rows3 {
      flex-wrap: wrap;
    }
  }
  @media screen and (max-width: 1050px) {
    .welcome-to-the-container {
      font-size: 48px;
    }
    .ccan-asalatu-agbaye {
      font-size: var(--font-size-10xl);
    }
    .hero-section {
      padding-bottom: 100px;
      box-sizing: border-box;
    }
  }
  @media screen and (max-width: 750px) {
    .hero-container-inner {
      display: none;
    }
    .hero-container,
    .hero-section-inner {
      padding-left: var(--padding-78xl);
      padding-right: var(--padding-86xl);
      box-sizing: border-box;
    }
    .hero-section-inner {
      padding-left: var(--padding-12xl);
      padding-right: var(--padding-12xl);
    }
    .hero-section {
      gap: 87px;
    }
    .stories-card-content {
      min-width: 100%;
    }
    .card-rows {
      gap: var(--gap-67xl);
      padding: var(--padding-7xl) var(--padding-36xl) var(--padding-7xl)
        var(--padding-49xl);
      box-sizing: border-box;
    }
    .knowledge-card-content-wrapper {
      min-width: 100%;
    }
    .card-rows1 {
      gap: var(--gap-67xl);
      padding: var(--padding-7xl) var(--padding-36xl) var(--padding-7xl)
        var(--padding-49xl);
      box-sizing: border-box;
    }
    .card-rows-inner {
      min-width: 100%;
    }
    .card-rows2 {
      gap: var(--gap-67xl);
      padding-left: var(--padding-49xl);
      padding-top: var(--padding-7xl);
      padding-bottom: var(--padding-7xl);
      box-sizing: border-box;
    }
    .card-rows-child {
      min-width: 100%;
    }
    .card-rows3 {
      gap: var(--gap-67xl);
      padding: var(--padding-7xl) var(--padding-36xl) var(--padding-7xl)
        var(--padding-49xl);
      box-sizing: border-box;
    }
    .left-navigation-column,
    .quote-container-parent {
      flex-wrap: wrap;
    }
    .navigation-columns4 {
      min-width: 100%;
    }
    .footer-content-group {
      gap: var(--gap-base);
    }
    .footer7 {
      padding-top: var(--padding-34xl);
      padding-bottom: var(--padding-33xl);
      box-sizing: border-box;
    }
  }
  @media screen and (max-width: 450px) {
    .hero-container {
      padding-left: var(--padding-xl);
      padding-right: var(--padding-xl);
      box-sizing: border-box;
    }
    .welcome-to-the-container {
      font-size: var(--font-size-10xl);
    }
    .ccan-asalatu-agbaye {
      font-size: var(--font-size-3xl);
    }
    .hero-section {
      gap: var(--gap-25xl);
      padding-bottom: var(--padding-46xl);
      box-sizing: border-box;
    }
    .ready-to-put-container {
      font-size: var(--font-size-xl);
    }
    .stories-card-content {
      padding-bottom: var(--padding-32xl);
      box-sizing: border-box;
    }
    .card-rows {
      gap: var(--gap-24xl);
      padding-left: var(--padding-xl);
      padding-right: var(--padding-xl);
      box-sizing: border-box;
    }
    .get-ready-to-container {
      font-size: var(--font-size-xl);
    }
    .card-rows1 {
      gap: var(--gap-24xl);
      padding-left: var(--padding-xl);
      padding-right: var(--padding-xl);
      box-sizing: border-box;
    }
    .embark-on-a-container {
      font-size: var(--font-size-xl);
    }
    .card-rows-inner {
      padding-bottom: var(--padding-21xl);
      box-sizing: border-box;
    }
    .card-rows2 {
      gap: var(--gap-24xl);
      padding-left: var(--padding-xl);
      box-sizing: border-box;
    }
    .join-us-on-container {
      font-size: var(--font-size-xl);
      line-height: 26px;
    }
    .card-rows3 {
      gap: var(--gap-24xl);
      padding-left: var(--padding-xl);
      padding-right: var(--padding-xl);
      box-sizing: border-box;
    }
    .explore8,
    .our-service8,
    .subscribe-to-our-container7 {
      font-size: var(--font-size-xl);
      line-height: 26px;
    }
    .submit21 {
      font-size: var(--font-size-base);
    }
    .email-input2 {
      flex-wrap: wrap;
    }
    .lend-allah-a-container8,
    .submit22 {
      font-size: var(--font-size-base);
    }
  }